<template>
  <div class="article row">
    <div class="title">
      <router-link :to="'/articleDetail/'+article.id">{{article.title}}</router-link>
    </div>
    <div class="describe">
      <p>{{article.describe}}</p>
    </div>
    
    <div class="info">
      <!-- <span><i class="el-icon-document"></i>nginx</span> -->
      <!-- <span><i class="iconfont icon-download"></i>{{article.title}}</span> -->
      <span><i class="iconfont icon-browse"></i>{{article.browse_count}}</span>
       <span><i class="iconfont icon-date"></i>{{article.show_time}}</span>
    </div>
    <div class="line"></div>
  </div>
</template>

<script>
export default {
  name: 'articleGrid',
  props:['article'],
  data () {
    return {
      list:[],
    }
  },
  created: function(){

  },
  methods: {

  },
}

</script>

<style>
  @keyframes linemove
  {
    from {width: 0%}
    to {width: 100%}
  }

  .article{background: #fff;margin: 9px 0px;position: relative;overflow: hidden;}
  .article .line{background-color: #38f;height: 3px;position: absolute;bottom: 0px;z-index: 9999;}
  .article:hover .line{ animation: linemove 0.5s;-moz-animation: linemove 0.5s;-webkit-animation: linemove 0.5s; -o-animation: linemove 0.5s;}
  .article .title a{color: #337ab7;text-decoration: none;display: inline-block;}
  .article .title a:hover{color: #666;}
  .article .describe p{text-indent:2em;color: #333333;}
  .article .title{padding: 13px;padding-bottom: 0px;}
  .article .describe{padding: 13px;padding-top: 10px;padding-bottom: 0px;}
  .article .info{padding: 13px;color: #666;float: right;font-size: 15px;}
  .article .info span{margin-left: 8px;}
  .article .info span i{margin-right: 5px;}

  @media screen and (max-width: 768px) {
    .article .title a{font-size: 18px;}
    .article .describe p{font-size: 15px;}
  }

  @media screen and (min-width: 768px) {
    .article .title a{font-size: 20px;}
    .article .describe p{font-size: 15px;}
  }  
</style>